<template>
  <div class="container">
    <div class="content">
      <div class="title">
        我的订单
      </div>
      <el-tabs
        v-model="filter.status"
        @tab-click="changeStatus"
      >
        <el-tab-pane
          v-for="item in status_array"
          :key="item.code"
          :label="item.name"
          :name="item.code"
        ></el-tab-pane>
      </el-tabs>
      <div class="list">
        <div class="item">
          <div class="img">
            <img
              src="@/assets/1.jpg"
              alt=""
            >
          </div>
          <div class="name">
            我是商品名称
          </div>
          <!--pick中-->
          <div class="progress">
            <span>进度：</span>
            <el-progress
              :show-text="false"
              :stroke-width="10"
              :percentage="70"
              status="warning"
            ></el-progress>
            <span>255/300</span>
          </div>
        </div>
        <div class="item">
          <div class="img">
            <img
              src="@/assets/1.jpg"
              alt=""
            >
          </div>
          <div class="name">
            我是商品名称
          </div>
          <!--生产中-->
          <div class="making">
            <div class="line">
              <div class="num">价格：1280</div>
              <div class="num">产量：500</div>
            </div>
            <div class="line">
              <div class="num num2">预发时间：2021-09-15</div>
            </div>
          </div>
        </div>
        <div class="item">
          <div class="img">
            <img
              src="@/assets/1.jpg"
              alt=""
            >
          </div>
          <div class="name">
            我是商品名称
          </div>
          <!--已发货-->
          <div class="making">
            <div class="line">
              <div class="num num2">价格：1280</div>
            </div>
          </div>
          <div class="progress">
            <span>收货：</span>
            <el-progress
              :show-text="false"
              :stroke-width="10"
              :percentage="70"
              status="warning"
            ></el-progress>
            <span>255/300</span>
          </div>
          <el-button
            type="primary"
            size="mini"
          >申请结算</el-button>
        </div>
        <div class="item">
          <div class="img">
            <img
              src="@/assets/1.jpg"
              alt=""
            >
          </div>
          <div class="name">
            我是商品名称
          </div>
          <!--已发货-->
          <div class="making">
            <div class="line">
              <div class="num num2">价格：1280</div>
            </div>
          </div>
          <div class="progress">
            <span>收货：</span>
            <el-progress
              :show-text="false"
              :stroke-width="10"
              :percentage="70"
              status="warning"
            ></el-progress>
            <span>255/300</span>
          </div>
          <el-button
            type="info"
            size="mini"
            disabled
          >已申请结算</el-button>
        </div>
      </div>
      <div class="page">
        <el-pagination
          background
          layout="total, prev, pager, next"
          :total="1000"
        >
        </el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      status_array: [
        {
          code: '0',
          name: '全部（365）'
        },
        {
          code: '1',
          name: 'PICK中（100）'
        },
        {
          code: '2',
          name: '生产中（200）'
        },
        {
          code: '3',
          name: '已发货（65）'
        }
      ],
      filter: {
        status: '0'
      }
    };
  },
  methods: {
    changeStatus() {}
  }
};
</script>

<style scoped>
.container {
  background: #f0f2f5;
  padding: 25px;
  font-size: 14px;
}
.container .content {
  background: #ffffff;
  padding-bottom: 40px;
}
.content .title {
  padding: 20px 30px;
  font-size: 20px;
  font-weight: bold;
  border-bottom: 1px solid #eee;
  color: #000000d8;
}
.content .el-tabs {
  padding: 10px 40px 0;
}

.list {
  display: flex;
  flex-wrap: wrap;
  padding: 10px 40px 0;
}
.list .item {
  width: 21%;
  margin-right: 5%;
  border: 1px solid #eee;
  margin-bottom: 30px;
  padding: 10px 0;
  display: flex;
  flex-direction: column;
  color: #7f7f7f;
}
.item:hover {
  box-shadow: 1px 1px 5px #888888;
}
.item:nth-child(4n) {
  margin-right: 0;
}
.item .img {
  margin: 0 10px 10px;
  border: 1px solid #eee;
  border-radius: 4px;
}
.item img {
  height: 300px;
  max-width: 100%;
}
.item .name {
  padding: 0 10px 10px;
  font-size: 15px;
  font-weight: bold;
}
.item .progress {
  display: flex;
  align-items: center;
  padding: 0 10px;
}
.progress .el-progress {
  flex-grow: 1;
  margin: 0 10px 0 5px;
}
.item .el-button {
  width: 100px;
  margin: 10px auto 0;
}
.item .making {
  padding: 0 10px;
}
.making .line {
  display: flex;
  justify-content: space-between;
  padding-bottom: 6px;
}
.line .num {
  width: 50%;
}
.line .num:last-child {
  text-align: right;
}
.line .num2 {
  width: 100%;
  text-align: left !important;
}
.page {
  text-align: center;
}
</style>